<template>
	<view class="top-sticky">
		<view class="banner">
			<!-- 系统状态栏 -->
			<view class="system-info"></view>
			<!-- 日期展示 -->
			<view class="date-show">
				<view v-if="backIcon" style="display: flex;align-items: center;width: 100rpx" @click="backToUrl">
					<uni-icons type="back" size="22" :color="backColor"></uni-icons>
				</view>
				<view v-else style="width: 100rpx"></view>
				<!-- 非自定义 -->
				<view class="flex-date" style="display: flex;flex: 1;justify-content: center;align-items: center">
					<view class="date-display " v-if="!centerView">{{ customTitle }}</view>
					<view v-else>
						<slot name="center"></slot>
					</view>
				</view>
				<view class="text-line-one" style="width: 100rpx;display: flex;justify-items: end" v-if="!rightView"></view>
				<view v-else style="width: 100rpx;display: flex;justify-content: end">
					<slot name="right"></slot>
				</view>
			</view>
			<view>
				<slot name="custom"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'customHeader',
		props: {
			customTitle: {
				type: [String, Number, Array],
				required: false,
				default: '零点娱乐'
			},
			backIcon: {
				type: Boolean,
				required: true,
				default: true
			},
			rightView: {
				type: Boolean,
				required: false,
				default: false
			},
			centerView: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		data() {
			return {
				backUrl: '',
				backColor: 'var(--white-text)'
			};
		},
		mounted() {

		},
		methods: {
			backToUrl() {
				if (this.backUrl != '') {
					uni.navigateTo({
						url: this.backUrl
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	.top-sticky {
		background: #1d1d1d !important;
	}
	
	.text-line-one {
		display: -webkit-box;
		/* 使用 WebKit 布局 */
		-webkit-line-clamp: 1;
		/* 限制显示最多 2 行 */
		-webkit-box-orient: vertical;
		/* 设置为垂直方向 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		box-sizing: border-box;
		/* 包括 padding 和 border 在内计算宽度 */
		white-space: normal;
	}
	
	.uni-calendar__content {
		background: #1d1d1d !important;
	}

	@media (prefers-color-scheme: light) {
		.top-sticky {
			background: #feffff !important;
		}
	}

	.system-info {
		height: var(--status-bar-height);
	}

	.banner {
		width: 100%;
	}

	.date-display {
		font-size: 30rpx;
		color: var(--white-text);
	}

	.date-show {
		display: flex;
		flex-direction: row;
		height: 88rpx;
		justify-content: space-between;
		width: 100%;
		align-items: center;
		padding: 0 30rpx 20rpx 30rpx;
		box-sizing: border-box;
	}

	.flex-date {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-grow: 1;
		align-items: center;
	}

	.top-sticky {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: var(--bg-color);
		z-index: 100;
	}
</style>